<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich">

<body>

	<link rel="stylesheet" href="lib/codemirror.css" />
	<script src="lib/codemirror.js"></script>
	<link rel="stylesheet" href="mode/xml/xml.css" />
	<script src="mode/xml/xml.js"></script>
	<link rel="stylesheet" href="css/docs.css" />

	<style type="text/css">
.CodeMirror {
	min-height: 400px;
}

.activeline {
	background: #f0fcff !important;
}
</style>

	<br /><br />
	<h:inputText id="name" style="width=300px"></h:inputText>
	<br /><br />
	<h:outputText value="Description:"></h:outputText>
	<br />
	<h:inputTextarea style="min-width=750px"></h:inputTextarea>
	<br /><br />
	
	Code:
	<div style="height: 500px; width: 750px; overflow: auto;">
		<h:inputTextarea id="code" name="code"
			style="resize: none; min-width: 1000px;"></h:inputTextarea>
	</div>

	<script>
		var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
			mode : "application/xml",
			lineNumbers : true,
			onCursorActivity : function() {
				editor.setLineClass(hlLine, null);
				hlLine = editor.setLineClass(editor.getCursor().line,
						"activeline");
			}
		});
		var hlLine = editor.setLineClass(0, "activeline");
		
		const DEFAULT_NAME ='Type the name here ...';
		
		function updateFields(){
			if( document.getElementById("name").value == ''){
				document.getElementById("name").value = DEFAULT_NAME;
			}
		}
		
		function verifyName(){
			if(document.getElementById("name").value == DEFAULT_NAME){
				document.getElementById("name").value = '';
			}
		}
		
		document.getElementById("name").onblur=updateFields;
		document.getElementById("name").onfocus=verifyName;
		
		updateFields();
	</script>

</body>
</html>